import {View, Text, Button} from 'react-native';
import {useReducer} from 'react';
import {produce} from 'immer'; // 导入immer的produce函数

// 使用TypeScript定义状态接口 - 嵌套对象结构
interface Person {
  a: {
    b: {
      c: number;
    };
  };
}

// 定义action类型
type Action = {
  type: 'add' | 'sub';
};

// 定义reducer函数，使用immer的produce简化嵌套对象的更新
const reducer = (state: Person, action: Action): Person => {
  switch (action.type) {
    case 'add':
      // 使用immer的produce函数来更新嵌套对象
      return produce(state, newState => {
        // 直接修改draft状态，immer会负责生成新的不可变状态
        newState.a.b.c += 1; // 在不破坏不可变性的情况下修改嵌套属性
      });
    case 'sub':
      return produce(state, newState => {
        // 直接修改draft状态，immer会负责生成新的不可变状态
        newState.a.b.c -= 1; // 在不破坏不可变性的情况下修改嵌套属性
      });
    default:
      return state;
  }
};

export default function App() {
  // 定义初始状态 - 一个嵌套对象
  const person: Person = {
    a: {b: {c: 100}},
  };

  // 使用useReducer管理复杂状态
  const [res, dispatch] = useReducer(reducer, person);

  return (
    <View>
      {/* 显示嵌套对象中的值 */}
      <Text>{res.a.b.c}</Text>
      {/* 触发状态更新 */}
      <Button title="add" onPress={() => dispatch({type: 'add'})} />
      <Button title="sub" onPress={() => dispatch({type: 'sub'})} />
    </View>
  );
}
